<template>
    <div>
        <el-card class="login-form-layout">
            <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
                <div style="text-align: center">
                    <img :src="logo" style="width: 80px;height: 56px;">
                </div>
                <h3 class="login-title" >ATest自动化平台</h3>
                <el-form-item prop="username" style="text-align:center">
                    <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名">
                    <span class="glyphicon glyphicon-user" aria-hidden="true" slot="prefix" style="color:#409EFF"></span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" style="text-align:center">
                    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-lock" aria-hidden="true" slot="prefix" style="color:#409EFF"></span>
                    <span class="glyphicon glyphicon-eye-close" aria-hidden="true" slot="suffix"  style="color:#409EFF" @click="showPwd"></span>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 60px;text-align: center">
                    <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <img :src="login_center_bg" class="login-center-layout">
    </div>
</template>

<script>
    import {isvalidUsername} from '../utils/validate';
    import {setSupport,getSupport,setCookie,getCookie} from '../utils/support';
    import login_center_bg from '../images/login_center_bg.png'
    import logo from '../images/logo.png'
    export default {
        name: "login.vue",
        data() {
            const validateUsername = (rule, value, callback) => {
                if (!isvalidUsername(value)) {
                    callback(new Error('请输入正确的用户名'))
                } else {
                    callback()
                }
            };
            const validatePass = (rule, value, callback) => {
                if (value.length < 3) {
                    callback(new Error('密码不能小于3位'))
                } else {
                    callback()
                }
            };
            return {
                loginForm: {
                    username: '',
                    password: '',
                },
                loginRules: {
                    username: [{required: true, trigger: 'blur', validator: validateUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePass}]
                },
                loading: false,
                pwdType: 'password',
                login_center_bg,
                logo
            }
        },
        created() {
            this.loginForm.username = getCookie("username");
            this.loginForm.password = getCookie("password");
            if(this.loginForm.username === undefined||this.loginForm.username==null||this.loginForm.username===''){
                this.loginForm.username = 'admin';
            }
            if(this.loginForm.password === undefined||this.loginForm.password==null){
                this.loginForm.password = '';
            }
        },
        methods: {
            showPwd() {
                if (this.pwdType === 'password') {
                    this.pwdType = ''
                } else {
                    this.pwdType = 'password'
                }
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$store.dispatch('Login', this.loginForm).then(() => {
                            this.loading = false;
                            setCookie("username",this.loginForm.username,15);
                            setCookie("password",this.loginForm.password,15);
                            this.$router.push({path: '/'})
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        console.log('参数验证不合法！');
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>
    div{
        margin-left: -8px;
        margin-right: -8px;
    }
    .login-form-layout {
        position: absolute;
        left: 0;
        right: 0;
        width: 360px;
        margin: 140px auto;
        border-top: 10px solid #409EFF;
    }
    .login-title {
        text-align: center;
        color: #409EFF;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .login-center-layout {
        background: #409EFF;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 200px;
    }
</style>